<!--#
layout("/layouts/platform.html"){
#-->
<div id="app"  v-cloak>
    <!--<div class="head">
        <div class="headone"><i class="el-icon-menu"></i>
            <span v-if="operation=='receivable'">应收账款</span>
            <span v-else-if="operation=='accepted'">已收账款</span></span>
            <span v-else>这是什么菜单？</span>
        </div>
    </div>-->
    <el-row class="header navbar bg-white">
        <div class="btn-group tool-button" style="line-height: 50px;">
            <el-input placeholder="样品编号或名称" v-trim v-model="pageForm.searchKeyword"  size="mini" style="width:180px;" clearable></el-input>
            <el-input placeholder="委托单位" v-trim v-model="pageForm.wtdw"  size="mini" style="width:180px;" clearable></el-input>
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table :data="tableData" @sort-change='pageOrder' height="520"  border size="small" header-align="center"  style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" prop="userOnline" label="操作" width="120" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini"><i class="ti-settings"></i><span class="ti-angle-down"></span></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <!--#if(@shiro.hasPermission("bus.cwgl.receivable")&&operation=='receivable'){#-->
                                <el-dropdown-item divided :command="{type:'toReceivable',id:scope.row.jbxxid,ypbh:scope.row.ypbh,jyfy:scope.row.jyfy,ysje:scope.row.ysje,sjje:scope.row.sjje}">收费</el-dropdown-item>
                            <!--#}#-->
                            <template v-if="scope.row.ysje>0">
                            <el-dropdown-item :command="{type:'toRefund',id:scope.row.jbxxid,ypbh:scope.row.ypbh,jyfy:scope.row.jyfy,ysje:scope.row.ysje,sjje:scope.row.sjje}">退费</el-dropdown-item>
                            </template>
                            <el-dropdown-item  :command="{type:'detail',id:scope.row.jbxxid}">详情</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="sfzt" label="收费状态" width="110px;" header-align="center" align="center" show-overflow-tooltip>
                <temlate slot-scope="scope">
                    <span v-if="scope.row.sfzt==0"><el-button type="primary" size="mini" round>待收费</el-button></span>
                    <span v-else-if="scope.row.sfzt==1"><el-button type="warning" size="mini" round>部分收费</el-button></span>
                    <span v-else-if="scope.row.sfzt==2"><el-button type="success" size="mini" round>收费完成</el-button></span>
                    <span v-else>状态异常</span>
                </temlate>
            </el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="ypbh" label="样品编号" min-width="110px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="left"sortable  prop="ypmc" label="产品名称" min-width="150px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sjdw" label="受检单位" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="wtdw" label="委托单位" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="jyks" label="检验部门" min-width="200px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="jyfy" label="检验费用" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ysje" label="已收金额" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sjje" label="剩缴金额" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange" :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
    </el-dialog>
    <el-drawer :wrapperClosable="false" title="详情" :visible.sync="drawer" direction="rtl" size="80%" @opened="openIframe" destroy-on-close>
        <iframe id="iframeDetail"  src="" width="100%" height="100%" frameborder="0" marginheight="0" ></iframe>
    </el-drawer>

    <el-dialog :close-on-click-modal="false" title="收费登记" :visible.sync="DialogVisible" width="60%">
        <el-form :model="formData" ref="DialogForm" :rules="Rules"  size="mini" label-width="120px" >
            <el-collapse v-model="activeNames" >
                <el-collapse-item title="样品信息" name="1">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="样品编号">
                                <el-link type="primary" size="mini" @click="dropdownCommand({type:'detail',id:formData.id})">{{formData.ypbh}}</el-link>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="检验费用">
                                {{formData.jyfy}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="已收金额">
                                {{formData.ysje}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="剩缴金额">
                                {{formData.sjje}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="收费" name="2">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item prop="jfrq" label="收费日期">
                                <el-date-picker type="date"  v-trim v-model="formData.jfrq" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="bcss" label="收费金额（元）">
                                <el-input maxlength="30"  v-trim v-model="formData.bcss"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="jffs" label="缴费方式">
                                <el-input maxlength="30"  v-trim v-model="formData.jffs"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="pzh" label="缴费凭证">
                                <el-input maxlength="30"  v-trim v-model="formData.pzh"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="pjfl" label="票据分类">
                                <el-input maxlength="30"  v-trim v-model="formData.pjfl"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="pjhm" label="票据号码">
                                <el-input maxlength="30"  v-trim v-model="formData.pjhm"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="sfzt" label="缴费情况" >
                                <el-select v-trim v-model="formData.sfzt" placeholder="请选择" style="width:180px;">
                                    <el-option
                                            v-for="item in sfztOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="收费明细" name="3">
                    <el-table :data="sfList" border size="small" header-align="center"  style="width: 100%">
                        <el-table-column prop="jfrq" label="收费日期" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="bcss" label="收费金额" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="jfr" label="收费人" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="jffs" label="缴费方式" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="pzh" label="缴费凭证" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="pjfl" label="票据分类" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="pjhm" label="票据号码" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="DialogVisible = false">取 消</el-button><el-button type="primary" @click="doReceivable">提 交</el-button></span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="退费登记" :visible.sync="RefundVisible" width="60%">
        <el-form :model="formData" ref="RefundForm" :rules="Rules" size="mini" label-width="120px" >
            <el-collapse v-model="activeNames" >
                <el-collapse-item title="样品信息" name="1">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="样品编号">
                                <el-link type="primary" size="mini" @click="dropdownCommand({type:'detail',id:formData.id})">{{formData.ypbh}}</el-link>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="检验费用">
                                {{formData.jyfy}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="已收金额">
                                {{formData.ysje}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="剩缴金额">
                                {{formData.sjje}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="退费" name="2">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item prop="jfrq" label="退费日期">
                                <el-date-picker type="date"  v-trim v-model="formData.jfrq" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="bcss" label="退费金额（元）">
                                <el-input maxlength="30"  v-trim v-model="formData.bcss"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="jffs" label="退费方式">
                                <el-input maxlength="30"  v-trim v-model="formData.jffs"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="pzh" label="退费凭证">
                                <el-input maxlength="30"  v-trim v-model="formData.pzh"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="pjfl" label="票据分类">
                                <el-input maxlength="30"  v-trim v-model="formData.pjfl"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="pjhm" label="票据号码">
                                <el-input maxlength="30"  v-trim v-model="formData.pjhm"  style="width:180px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="sfzt" label="缴费情况" >
                                <el-select v-trim v-model="formData.sfzt" placeholder="请选择" style="width:180px;">
                                    <el-option
                                            v-for="item in sfztOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="收费明细" name="3">
                    <el-table :data="sfList" border size="small" header-align="center"  style="width: 100%">
                        <el-table-column prop="jfrq" label="收费日期" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="bcss" label="收费金额" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="jfr" label="收费人" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="jffs" label="缴费方式" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="pzh" label="缴费凭证" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="pjfl" label="票据分类" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="pjhm" label="票据号码" min-width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="DialogVisible = false">取 消</el-button><el-button type="primary" @click="doRefund">提 交</el-button></span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var allMap = {jylxMap:${jylxMap}};
            var validate = function (rule, value, callback) {
                if (nONull(value)) {
                    //return callback(new Error('输入不可以为空'));
                    if (!Number(value)) {
                        callback(new Error('请输入数字'));
                    } else {
                        callback();
                    }
                }else{
                    callback();
                }
            };
            return {
                activeNames: ['1','2','3'],
                allMap:allMap,
                tableData: [],
                menuOptions: [],
                pageForm: {sfzt:"${sfzt}"},
                multipleSelection: [],
                operation:'${operation}',
                drawer: false,
                deltailURL:"",
                DialogVisible:false,
                RefundVisible:false,
                formData:{},
                sfList:{},
                sfztOptions:[{value:'1',label:'部分收费'},{value:'2',label:'收费完成'}],
                Rules:{
                    jfrq:[{required: true, message: '日期不可为空！', trigger: ['blur', 'change']}],
                    bcss:[{required: true, message: '费用不可为空！', trigger: ['blur', 'change']},{validator: validate, trigger: ['blur', 'change']}],
                    sfzt:[{required: true, message: '缴费情况不可为空！', trigger: ['blur', 'change']}],
                },
            }
        },
        methods: {
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/cwgl/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            dropdownCommand: function (command) {
                var self = this;
                if ("toReceivable" == command.type) {
                    self.formData={jffs:'',pzh:'',pjfl:'',pjhm:''};
                    sublime.showLoadingbar();//显示loading
                    $.post(base + "/platform/bus/cwgl/toReceivable/"+command.id, {}, function (data) {
                        sublime.closeLoadingbar();//关闭loading
                        if (data.code == 0) {
                            self.formData.id = command.id;//加载后台表单数据
                            self.formData.jbxxId = command.id;
                            self.formData.ypbh = command.ypbh;
                            self.formData.jyfy = command.jyfy;
                            self.formData.ysje = command.ysje;
                            self.formData.sjje = command.sjje;
                            self.sfList = data.data.sfList;
                            self.DialogVisible = true;//打开窗口
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
                if ("toRefund" == command.type) {
                    self.formData={jffs:'',pzh:'',pjfl:'',pjhm:''};
                    sublime.showLoadingbar();//显示loading
                    $.post(base + "/platform/bus/cwgl/toReceivable/"+command.id, {}, function (data) {
                        sublime.closeLoadingbar();//关闭loading
                        if (data.code == 0) {
                            self.formData.id = command.id;//加载后台表单数据
                            self.formData.jbxxId = command.id;
                            self.formData.ypbh = command.ypbh;
                            self.formData.jyfy = command.jyfy;
                            self.formData.ysje = command.ysje;
                            self.formData.sjje = command.sjje;
                            self.sfList = data.data.sfList;
                            self.RefundVisible = true;//打开窗口
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
                if ("detail" == command.type) {
                    this.drawer=true;
                    this.deltailURL="/platform/bus/ypxx/jbxx/detail/"+command.id;
                }
            },
            openIframe:function(){
                $("#iframeDetail").attr("src",this.deltailURL);
            },
            handleClose: function() {
                this.drawer=false;
            },
            doReceivable:function(){
                var self = this;
                self.$refs["DialogForm"].validate(function (valid) {
                    if (valid) {
                        sublime.showLoadingbar();//显示loading
                        $.post(base + "/platform/bus/cwgl/doReceivable", self.formData, function (data) {
                            sublime.closeLoadingbar();//关闭loading
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.DialogVisible = false;
                                self.doSearch();//查询是带条件的,加载新建用户选择的数据
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            doRefund:function() {
                var self = this;
                self.$refs["RefundForm"].validate(function (valid) {
                    if (valid) {
                        self.formData.bcss = -self.formData.bcss;
                        sublime.showLoadingbar();//显示loading
                        $.post(base + "/platform/bus/cwgl/doReceivable", self.formData, function (data) {
                            sublime.closeLoadingbar();//关闭loading
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.RefundVisible = false;
                                self.doSearch();//查询是带条件的,加载新建用户选择的数据
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            handleSelectionChange: function (val) {
                this.multipleSelection = val;
            }
        },
        created: function () {
            this.doSearch();
        }
    });

    function nONull(val){
        if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" ){
            return true;
        }else{
            return false;
        }
    }
</script>
<!--#
}
#-->
